<template>
  <div>
    <div class="navinfo">
      <router-link
        class="navs"
        to="/home"
      >推荐音乐</router-link>

      <router-link
        class="navs"
        to="/hot"
      >热歌榜</router-link>

      <router-link
        class="navs"
        to="/search"
      >热门搜索</router-link>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({})
}
</script>
<style lang="less" scoped>
#app {
  .header {
    width: 100%;
    height: 80px;
    background-color: #d43c33;
    color: white;
    .nav {
      display: flex;
      justify-content: space-around;
      line-height: 70px;
      align-items: center;
      img {
        width: 160px;
        height: 55px;
        margin-top: 8px;
      }
      .info {
        color: red;
        background-color: white;
        border-radius: 30px;
        border: none;
        height: 40px;
      }
    }
  }
}
.navinfo {
  display: flex;
  justify-content: space-around;
}
.navs {
  width: 20%;
  height: 55px;
  text-align: center;
  line-height: 50px;
  color: black;
}
.router-link-active {
  color: red;
  border-bottom: 4px red solid;
}
</style>